<style >
td.ivu-table-expanded-cell {
  padding: 0;
}
</style>
<template>
  <div>
    <Table :columns="columns1" :showHeader="false" :data="data1"></Table>
    <Modal :title="title" v-model="modal1" class-name="vertical-center-modal" :closable="false">
      <Form ref="formValidate" :model="formData" :label-width="80" :rules="ruleValidate">
        <FormItem label="模块名称" prop="moduleName">
          <Input v-model="formData.moduleName"></Input>
        </FormItem>
        <FormItem label="路径">
          <Input v-model="formData.url"></Input>
        </FormItem>
        <FormItem label="所属模块">
          <Select v-model="formData.pid" :disabled="editdisable">
            <Option
              v-for="item in moduleList"
              :value="item.id"
              :key="item.id"
              :label="item.moduleName"
            ></Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="model1Closed()">取消</Button>
        <Button type="primary" size="large" @click="ok()">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import talbeExpend from './module-table-expend'
import { list, save, delete1, treeList } from '@/services/module'
export default {
  props: {
    data1: Array,
    moduleList: Array
  },
  methods: {
    remove(row) {
      if (row.children && row.children.length > 0) {
        this.$Modal.confirm({
          title: "警告",
          content: "该模块包含子模块,确认删除将同时删除子模块,是否确认!",
          onOk: () => {
            this.doRemove(row)
          }
        })
      } else {
        this.doRemove(row)
      }
    },
    async doRemove(row) {
      try {
        await delete1(row.id)
        this.$Message.info("操作成功");
        this.$emit("on-result-change")
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    edit(row) {
      this.formData = Object.assign({}, row)
      this.title = "编辑"
      this.editdisable = true
      this.modal1 = true
    },
    async ok() {
      let valid = await this.$refs.formValidate.validate()
      if (!valid) return
      try {
        await save(this.formData)
        this.$Message.info("操作成功");
        this.model1Closed()
        this.$emit("on-result-change")
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    model1Closed() {
      this.modal1 = false
      this.formData = {}
      this.$refs.formValidate.resetFields()
    },
    async refresh() {
      this.$emit("on-result-change")
    }
  },
  data() {
    return {
      // moduleList: [],
      editdisable: false,
      modal1: false,
      title: "",
      formData: {},
      columns1: [
        {
          type: 'expand',
          width: 20,
          render: (h, params) => {
            return h(talbeExpend, {
              props: {
                data1: params.row.children,
                moduleList: this.moduleList
              },
              on: {
                "on-result-change": this.refresh
              }
            })
          }
        },
        {
          title: '模块名称',
          key: 'moduleName',
          render: (h, params) => {
            return h('div', [
              h('p', {
                style: { 'margin-left': params.row._level * 20 + 'px' }
              }, params.row.moduleName)
            ]);
          }
        },
        {
          title: '路径',
          key: 'url'
        },
        {
          title: '操作',
          // key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除'),
            ]);
          }
        }
      ],
      ruleValidate: {
        moduleName: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
      },
    }
  }

};
</script>